<div class="!border-b-black/5 shrink-0 border-b border-b-gray-100 py-4">
  <div class="flex justify-between items-center pl-6 pr-5 h-6">
    <div class="text-base font-semibold text-gray-900">
      {{ 'PAC.Xpert.SetUpAuthorization' | translate: {Default: 'Set Up Authorization'} }}
    </div>
    <div class="flex items-center">
      <div class="flex justify-center items-center w-6 h-6 cursor-pointer" (click)="cancel()">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon w-4 h-4 text-gray-500">
          <path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>
        </svg>
      </div>
    </div>
  </div>
  <div class="pl-6 pr-10 leading-[18px] text-xs font-normal text-gray-500">
    {{ 'PAC.Xpert.AfterConfiguringCredentials' | translate: {Default: 'After configuring credentials, will created a toolset for this tools'} }}
  </div>
</div>

<div class="grow overflow-y-auto">
  <div class="px-4 py-3 h-full">

    <div class="flex flex-wrap">
      <div class="flex items-center py-2 text-sm text-gray-900">
        {{ 'PAC.Xpert.CustomName' | translate: {Default: 'Custom name'} }}
      </div>

      <div class="relative w-full">
        <input tabindex="0" class="
          block px-3 w-full h-9 bg-gray-100 text-sm rounded-lg border border-transparent
          appearance-none outline-none caret-primary-600
          hover:border-[rgba(0,0,0,0.08)] hover:bg-gray-50
          focus:bg-white focus:border-gray-300 focus:shadow-xs
          placeholder:text-sm placeholder:text-gray-400"
          type="text" 
          [value]="toolset()?.name"
          [(ngModel)]="toolsetName"
        >
      </div>
    </div>

    <div class="flex flex-wrap">
      <div class="flex items-center py-2 text-sm text-gray-900">
        {{ 'PAC.Xpert.Description' | translate: {Default: 'Description'} }}
      </div>

      <div class="relative w-full">
        <textarea tabindex="0" class="shrink-0 min-h-[30px]
          block px-3 py-1 w-full bg-gray-100 text-sm rounded-lg border border-transparent
          appearance-none outline-none caret-primary-600
          hover:border-[rgba(0,0,0,0.08)] hover:bg-gray-50
          focus:bg-white focus:border-gray-300 focus:shadow-xs
          placeholder:text-sm placeholder:text-gray-400"
          matInput
          cdkTextareaAutosize
          cdkAutosizeMinRows="1"
          cdkAutosizeMaxRows="5"
          type="text" 
          [value]="toolset()?.description"
          [(ngModel)]="toolsetDescription"
        ></textarea>
      </div>
    </div>

    @for (credential of credentialsSchema(); track $index) {
      <div class="py-3 flex flex-wrap">
        <div class="flex-1 flex items-center py-2 text-sm text-gray-900">
          {{credential.label | i18n}}
          @if (credential.required) {
            <span class="ml-1 text-red-500">*</span>
          }

          @if (credential.help) {
            <div class="inline-block" [matTooltip]="credential.help | i18n" matTooltipPosition="above" >
              <div class="ml-1 w-4 h-4">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="text-text-tertiary hover:text-text-secondary w-full h-full">
                  <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z"></path>
                </svg>
              </div>
            </div>
          }
        </div>

        <xpert-tool-builtin-credential class="shrink-0"
          [credential]="credential"
          [credentials]="credentialsValue()"
          [ngModel]="getCredential(credential.name)"
          (ngModelChange)="setCredential(credential.name, $event)"
        />
        
        @if (credential.url) {
          <a [href]="credential.url" target="_blank" rel="noopener noreferrer" class="inline-flex items-center p-1 text-xs !text-primary-400 hover:!text-primary-600">
            {{'PAC.Xpert.HowtoGet' | translate: {Default: 'How to get'} }}
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-1 w-3 h-3">
              <g id="link-external-02"><path id="Icon" d="M10.5 4.5L10.5 1.5M10.5 1.5H7.49999M10.5 1.5L6 6M5 1.5H3.9C3.05992 1.5 2.63988 1.5 2.31901 1.66349C2.03677 1.8073 1.8073 2.03677 1.66349 2.31901C1.5 2.63988 1.5 3.05992 1.5 3.9V8.1C1.5 8.94008 1.5 9.36012 1.66349 9.68099C1.8073 9.96323 2.03677 10.1927 2.31901 10.3365C2.63988 10.5 3.05992 10.5 3.9 10.5H8.1C8.94008 10.5 9.36012 10.5 9.68099 10.3365C9.96323 10.1927 10.1927 9.96323 10.3365 9.68099C10.5 9.36012 10.5 8.94008 10.5 8.1V7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
              </g>
            </svg>
          </a>
        }
      </div>
    }
  </div>
</div>

@if (loading()) {
  <ngm-spin class="absolute top-0 left-0 w-full h-full" />
}

<div class="flex items-center justify-center px-4">
  @if (toolset()) {
    <button type="button" class="btn disabled:btn-disabled btn-danger btn-medium mr-auto"
      (click)="remove()">{{'PAC.ACTIONS.Remove' | translate: {Default: 'Remove'} }}</button>
  }

  <div class="flex justify-center items-center space-x-2">
    <button type="button" class="btn disabled:btn-disabled btn-secondary btn-medium"
      (click)="cancel()">{{'PAC.ACTIONS.Cancel' | translate: {Default: 'Cancel'} }}</button>
    <button type="button" class="btn disabled:btn-disabled btn-primary btn-medium"
      [disabled]="loading() || credentialsInvalid()"
      (click)="save()">{{'PAC.ACTIONS.Save' | translate: {Default: 'Save'} }}</button>
  </div>
</div>